<template>
  <div class="member-order">
    <!-- Tab组件 -->
    <TiziTabs v-model="activeName" @tab-click="tabClick">
      <TiziTabsPanel
        v-for="item in orderStatus"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        >{{item.label}}</TiziTabsPanel
      >
    </TiziTabs>
    <!-- 订单列表 -->
    <div class="order-list">
        <div v-if="loading" class="loading"></div>
        <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
        <OrderItem v-for="item in orderList" :key="item.id" :order="item" @on-cancel="handlerCancel" @on-delete="handlerDelete" @on-confirm="handlerConfirm" @on-logistics="handlerLogistics" @on-Valuate="handlerValuate"/>
    </div>
    <!-- 分页组件 -->
    <TiziPagination v-if="total > 0" :current-page="reqParams.page" :page-size="reqParams.pageSize" :total="total" @current-change="reqParams.page = $event" />
    <!-- 取消原因组件 -->
    <OrderCancel ref="orderCancelCom" />
    <!-- 查看物流组件 -->
    <OrderLogistics ref="orderLogisticsCom" />
  </div>
  
</template>

<script>
import {ref,reactive, watch} from 'vue'
import {orderStatus} from '@/api/constants'
import {confirmOrder, deleteOrder, findOrderList} from '@/api/order'
import OrderItem from './components/order-item.vue'
import OrderCancel from './components/order-cancel.vue'
import OrderLogistics from './components/order-logistics.vue'
import Message from '@/components/library/Message'
import Confirm from '@/components/library/confirm'
export default {
    name:'MemberOrder',
    components:{OrderItem, OrderCancel, OrderLogistics},
    setup() {
        const activeName = ref('all')

        // 点击选项卡
        const tabClick = ({ index }) => {
            reqParams.page = 1
            reqParams.orderState = index
        }

        // 查询订单参数
        const reqParams = reactive({
            page:1,
            pageSize:5,
            orderState:0
        })
        // 订单列表
        const orderList = ref([])
        const total = ref(0)
        const loading = ref(false)
        // 查询订单
        const getOrderList = () => {
            loading.value = true
            findOrderList(reqParams).then(data => {
                orderList.value = data.result.items
                total.value = data.result.counts
                loading.value = false
            })
        }
        // 筛选条件重新变化
        watch(reqParams,()=> {
            getOrderList()
        },{immediate:true})

        // 删除订单
        const handlerDelete = (order) => {
          Confirm({text:'您确认删除该条订单吗？'}).then(() => {
            deleteOrder(order.id).then(() => {
              Message({text:'删除订单成功', type:'success'})
              getOrderList()
            })
          }).catch(e => {})
        }
        return {activeName,orderStatus,orderList,tabClick,total,loading,getOrderList,reqParams,handlerDelete,...useCancel(),...useConfirm(),...useLogistics(),...useValuate()}
    }
}
// 取消订单逻辑
export const useCancel= () => {
    const orderCancelCom = ref(null)
    const handlerCancel = (order) => {
        // order就是你要取消的订单
        orderCancelCom.value.open(order)
    }
    return {handlerCancel,orderCancelCom}
}

// 确认收货逻辑
export const useConfirm = () => {
  const handlerConfirm = (order) => {
    // order就是你要确认收货的订单
    Confirm({text:'您确认已收货吗？确认后将支付给商家'}).then(() => {
      confirmOrder(order.id).then(() => {
        Message({text:'确认收货成功', type:'success'})
        order.orderState = 4
      })
    })
  }
  return {handlerConfirm}
}

// 评价逻辑
export const useValuate = () => {
  const handlerValuate = (order) => {
    Confirm({text:'是否给商家点个赞？'}).then(() => {
      Message({text:'谢谢您的支持！',type:'success'})
      order.orderState = 5
    })
  }
  return{handlerValuate}
}

// 查看物流逻辑
export const useLogistics = () => {
  const orderLogisticsCom = ref(null)
  const handlerLogistics = (order) => {
    orderLogisticsCom.value.open(order)
  }
  return {handlerLogistics,orderLogisticsCom}
}
</script>

<style lang="less" scoped>
.member-order {
  height: 100%;
  background: #fff;
}
.order-list {
  background: #fff;
  padding: 20px;
  position: relative;
  min-height: 400px;
}
.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255,255,255,.9) url(../../../assets/images/loading1.gif) no-repeat center;
}
.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}
</style>